<template>
  <div class="signIn">
    <img src="../../static/images/sign.jpg">
    <div class="user-sign">
      <div class="sidebarDiv">
          <i class="iconfont icon-trendingup"></i>
          <span class="departmentSpanSimple">Campus
            <span class="uniqueLogo">Care</span>
          </span>
          <div class="text-right version">v1.0</div>
      </div>
      <div class="passport">
          <div class="user-name">
            <i class="iconfont icon-person"></i>
            <input placeholder="用户名" autocomplete="off"/>
          </div>
          <div class="user-password">
            <i class="iconfont icon-lockoutline"></i>
            <input placeholder="密码" type="password" autocomplete="off"/></input>
          </div>
          <button type="button" class="btn btn-default" v-on:click="signIn()">登录</button>
          <div class="forget">忘记密码</div>
      </div>
    </div>
    <footer>版权信息：@ 2016江苏金智教育信息股份有限公司 苏ICP备10204514号</footer>
  </div>
</template>

<script>
import BS from '../dataManage'
export default {
  data () {
    return {
      
    }
  },
  methods:{
    signIn:function() {
      var self = this;
      var user = $('.user-name input').val();
      var password = Base64.encode($('.user-password input').val());
      var url = 'care/site/login';
      BS.getUserData(self,user,password,url)
    }
  },
  ready(){
    var maxHeight = $(document).height(); 
    $('.signIn img').css("height",maxHeight);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.signIn{
  position: relative;
}
.signIn img{
  width: 100%;
  position: relative;
}
.user-sign{
  position: absolute;
  height: 482px;
  width: 360px;
  top: 50%;
  margin-top: -241px;
  left: 50%;
  margin-left: -180px;
  border-radius: 10px;
  filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
  -ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/  
  background:#2ACDCF; /* 一些不支持背景渐变的浏览器 */  
  background:-moz-linear-gradient(left, #2ACDCF,#769ADC );  
  background:-webkit-gradient(linear, 0 0, right bottom, from(#2ACDCF), to(#769ADC));  
  background:-o-linear-gradient(left, #2ACDCF, #769ADC); 
}
.sidebarDiv{
  margin-top: 94px;
  text-align: center;
}
.sidebarDiv i{
  color: #fff;
  font-size: 38px;
  vertical-align: sub;
  margin-right: 16px;
}
.sidebarDiv .departmentSpanSimple{
  font-size: 28px;
  color:#fff;
}
.sidebarDiv .uniqueLogo{
  color: #33E8E9;
}
.sidebarDiv .version{
  color: #fff;
  font-size: 16px;
  margin-right: 66px;
  margin-top: 6px;
}
.passport{
  position: relative;
   margin-top: 72px;
}
.passport i{
  color: #fff;
  font-size: 24px;
  position: absolute;
  left: 52px;
  z-index: 1000;
  
}
.passport .user-name i{
  top: 5px;
}
.passport .user-password i{
  top: 55px;
}
.passport  input,
.passport  input:focus{
  border:1px solid #fff;
  background-color: transparent;
  color: #fff;
  width: 280px;
  height: 32px;
  padding-left: 48px;
  border-radius: 24px;
  left: 50%;
  margin-left: -140px;
  position: absolute;
  outline:none;
  font-size: 14px;
}

.passport input:autofill{
  background-color: #fff!important;
  color: #fff!important;
}
.passport input:-webkit-autofill{
  background-color: #fff!important;
  color: #fff!important;
}
.passport .user-password input{
    margin-top: 50px;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #fff;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #fff;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #fff;
}  
.passport button{
  margin-top: 126px;
  background: #fff;
  color: #33E8E9;
  position: absolute;
  left: 50%;
  margin-left: -140px;
  width: 280px;
  border-radius: 24px;
}
.passport .forget{
  color: #fff;
  position: absolute;
  margin-top: 172px;
  font-size: 14px;
  margin-left: -28px;
  left: 50%;
  cursor: pointer;
}
:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s;
}
footer{
  text-align: center;
  position: absolute;
  bottom: 24px;
  color: #fff;
  left: 50%;
  margin-left: -193px;
}
</style>
